<script lang="ts" setup></script>

<template>
  <div>
    <footer class="text-3.5 text-sys-layer-e">
      <div class="mb-5 w-full border-b-(1 #e8eaed solid)" />
      <div class="grid gap-7.5">
        <section class="grid gap-2.5">
          <a target="_blank">Vales-presente</a>
          <a target="_blank">Resgatar</a>
          <a target="_blank">Política de reembolso</a>
        </section>
        <section class="grid gap-2.5">
          <a target="_blank">Crianças e família</a>
          <a target="_blank">Guia para a família</a>
          <a target="_blank">Compartilhamento em família</a>
        </section>
      </div>
      <div class="mt-7.5 flex flex-wrap">
        <div class="mr-6 leading-5">
          <a target="_blank">Termos de Serviço</a>
        </div>
        <div class="mr-6 leading-6">
          <a target="_blank">Privacidade</a>
        </div>
        <div class="mr-6 leading-6">
          <a target="_blank">Desenvolvedores</a>
        </div>
        <div class="mr-6 leading-6">
          Todos os preços incluem Tributo.
        </div>

        <div class="mr-6 leading-10">
          <div class="grid-rows-1fr item-center flex gap-3">
            <img src="https://ssl.gstatic.com/store/images/regionflags/brazil.png" class="h-4.5 w-6 self-center">
            <div>
              Brasil (Português)
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
a {
  --uno: 'text-sys-layer-e';
}
</style>
